<template>
    <div class="tech-empty-el">
        <img v-if="type === 'normal'" class="empty-img" src="@assets/icon/empty.svg" alt="暂无数据">
        <img v-else-if="type === 'location'" class="empty-location-img" src="@assets/icon/location.png" alt="暂无数据">
        <img v-else-if="type === 'discount'" class="empty-discount" src="@assets/icon/discount_empty.png" alt="暂无优惠券">
        <img v-else-if="type === 'order'" class="empty-location-order" src="@assets/icon/order.png" alt="暂无订单">
        <img v-else-if="type === 'activity'" class="empty-activity" src="@assets/icon/activity_empty.png" alt="暂无活动">
    </div>
</template>

<script>
export default {
    name: 'EmptyElement',
    props: {
        type: {
            type: String,
            default: 'normal', // normal, location, discount, order
        },
    },
};
</script>

<style lang="less" scoped>
    @empty-icon-size: 80px;
    .tech-empty-el {
        width: 100%;
        height: 100%;
        background-color: @white;
        .flex-column-center();
        .empty-img {
            width: @empty-icon-size;
            height: @empty-icon-size;
        }
        .empty-location-img {
            width: 200px;
        }
        .empty-location-order {
            width: 200px;
        }
        .empty-discount,
        .empty-activity {
            width: 300px;
        }
    }
</style>
